<template>
  <view>
    <navbar top="80rpx"></navbar>
    <view class="container">
		<view class="header-title">
			<image src="../../../../static/images/orderTitle.png" mode="widthFix"></image>
		</view>
      <view class="header">
        <view class="header-container">
          <view class="tab-list dis-flex">
            <view v-for="(item,index) in tab.list" :key="item.type"
                  :class="'tab' + (item.type == tab.current ? ' active' : '')"
                  @tap.stop.prevent="toggleTab(item.type)">
              {{ item.title }}
            </view>
          </view>
        </view>
        <view class="header-placeholder"></view>
      </view>
      <view class="sale-list">
        <view v-for="item in sale.list" :key="item.id" class="sale" @tap.stop.prevent="onSaleTap(item)">
          <view class="dis-flex flex-x-between flex-y-center">
            <view class="col-9 f-26">{{ item.create_time }}</view>
            <view class="dis-flex flex-y-center">
             <!-- <image v-if="10 == item.status.value" class="sale-img" src="/static/images/user/img_time.png"
                     mode=""></image>
              <image v-else-if="20 == item.status.value" class="sale-img" src="/static/images/user/img_cancel.png" mode=""></image>
              <image v-else class="sale-img" src="/static/images/user/img_up.png" mode=""></image> -->
              <view class="m-left10 f-26 col-f">{{ item.status.text }}</view>
            </view>
          </view>
          <view class="goods dis-flex m-top20">
            <view class="goods__img-wrapper flex-fixed">
              <image class="goods__img" :src="item.goods_image" mode="aspectFill"></image>
            </view>
            <view class=" goods__text flex-box m-left20">
              <view class="goods__name col-f f-28 onelist-hidden--s">{{ item.goods_name }}</view>
              <view class=" f-26 col-9" v-if="!item.is_blind_box&&item.spec_value">规格：{{ item.spec_value }}</view>
			  <view class="" style="height: 42rpx;" v-else-if="item.is_blind_box"></view>
              <view class=" dis-flex flex-x-between flex-y-center">
				<view v-if="item.is_blind_box&&!item.open_blind_box_status"></view>
                <view class="assets__no_warp" v-else>
                  <text class="left">序号</text>
                  <text v-if="1 == item.sort_no_status && item.sort_no" class="right">#{{ item.sort_no }}</text>
                  <text v-else class="right">上链中</text>
                </view>
                <view class="f-30 price">￥{{ item.sale_price }}</view>
              </view>
            </view>
          </view>
          <view v-if="1 == item.can_cancel" class="btn-cancel-wrapper m-top40">
            <view class="btn-cancel f-26" @tap.stop.prevent="onCancelBtnTap(item)">取消发布</view>
          </view>
        </view>
      </view>
      <view v-if="!sale.loading && 0 == sale.list.length" class="yoshop-notcont">
        <text class="iconfont icon-wushuju"></text>
        <view class="cont">暂无记录</view>
      </view>
    </view>
    <!-- 取消寄售弹窗 -->
    <alert :show="alert.showCancel">
      <view class="sale-alert sale-cancel-alert">
        <view class="sale-alert-container">
          <view class="assets-info-wrapper">
            <view class="assets-info dis-flex flex-y-center">
              <image class="assets__img flex-fixed" :src="alert.info.goods_image" mode=""></image>
              <view class="m-left30">
                <view class="assets__name onelist-hidden--s f-30 col-f">{{ alert.info.goods_name }}</view>
                <view class="assets__no-wrapper m-top20 t-l">
                  <view class="assets__no">
                    <text
                        v-if="1 == alert.info.sort_no_status && alert.info.sort_no !== '--'">＃{{ alert.info.sort_no }}</text>
                    <text v-else>上链中</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="m-top40 f-26 t-c">确定取消寄售《{{ alert.info.goods_name }}》吗？</view>
          <view class="btn-wrapper dis-flex f-28">
            <view class="btn flex-box" hover-class="hover" @tap.stop.prevent="alert.showCancel = false">取消</view>
            <view class="btn flex-box col-m" hover-class="hover" @tap.stop.prevent="onConfirmBtnTap">确定</view>
          </view>
        </view>
      </view>
    </alert>
  </view>
</template>

<script>
import navbar from "@/components/navbar/navbar";
import alert from "@/components/alert/index.vue";
const app = getApp();
export default {
  components: {
    navbar,
    alert
  },
  data() {
    return {
      tab: {
        list: [{
          title: '全部',
          type: 'all'
        }, {
          title: '寄售中',
          type: 'onSale'
        }, {
          title: '已卖出',
          type: 'completed'
        }, {
          title: '已取消',
          type: 'canceled'
        }],
        current: 'all'
      },
      sale: {
        page: 1,
        loading: true,
        hasMore: false,
        list: []
      },
      alert: {
        info: {},
        showCancel: false, // 显示取消售卖弹窗
      }
    }
  },
  onLoad() {
    this.requestData();
  },
  onPullDownRefresh() {
    this.sale.page = 1;
    this.requestData(() => {
      uni.stopPullDownRefresh();
    });
  },
  onReachBottom() {
	  console.log('触底')
    if (this.sale.hasMore && !this.sale.loading) {
      this.requestData();
    }else{
		app.showToast('已经到底了哦~');
	}
  },
  methods: {
    toggleTab(type) {
      if (type != this.tab.current) {
        this.tab.current = type;
        this.sale.page = 1;
        this.requestData();
      }
    },
    requestData(callback) {
      this.sale.loading = true;
      uni.showLoading();
      app._get('ordersale/userSaleLists', {
        page: this.sale.page,
        dataType: this.tab.current
      }, (res) => {
        let {
          data,
          total
        } = res.data;
        let {
          page,
          list,
          hasMore
        } = this.sale;
        if (1 == page) {
          list.length = 0;
        }
        list = [...list, ...data];
        hasMore = total > list.length;
        if (hasMore) {
          page++;
        }
        this.sale.page = page;
        this.sale.list = list;
        this.sale.hasMore = hasMore;
      }, null, () => {
        this.sale.loading = false;
        uni.hideLoading();
        callback && callback();
      })
    },
    onSaleTap: function(sale) {
      if (30 != sale.status.value) {
        //寄售中的藏品可以查看详情
        uni.navigateTo({
          url: `/pages/user/assets/detail/detail?order_id=${sale.origin_order_id}`
        })
      }
    },
    // 点击取消寄售
    onCancelBtnTap: function (sale) {
      this.alert.info = sale;
      this.alert.showCancel = true;
    },
    // 确定取消寄售
    onConfirmBtnTap: function () {
      app._post_form('ordersale/cancelSale', {
        id: this.alert.info.id
      }, (res) => {
          this.alert.showCancel = false;
          app.showSuccess(res.msg, ()=> {
            // 重新刷新数据
            this.sale.page = 1;
            this.requestData();
          })
      })
    }
  }
}
</script>
<style lang="scss">
  page,
  body {
    // background: #242424;
  }
</style>
<style lang="scss" scoped>
	.header-title{
		width: 100%;
		height: 38rpx;
		position: fixed;
		top: 0rpx;
		// background: #1a1919;
		z-index: 100;
	}
	.header-title image{
		width: 100%;
		height: 100%;
	}

.header .header-container {
  width: 100%;
  height: 100rpx;
  // background: #1a1919;
  position: fixed;
  top: 38rpx;
  left: 0;
  z-index: 2;
}

.header .header-placeholder {
  height: 100rpx;
}

.header .tab-list {
	display: flex;
	justify-content: space-between;
	width: 100%;
	// background: #1A1A1A;
	// border-bottom: 1rpx solid #e4e4e4;
	position: absolute;
	left: 0;
	top: 0;
}

.header .tab {
  height: 80rpx;
  padding: 0 50rpx;
  line-height: 80rpx;
  position: relative;
  font-size: 28rpx;
  color: #6f6f6f;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.header .tab.active {
  // font-size: 30rpx;
  font-weight: bold;
  color: $uni-text-color-active;
  // border-bottom: 3rpx solid $uni-text-color-active;
}

.header .tab.active:after {
  content: "";
  width: 56rpx;
  height: 4rpx;
  background: #CCA754;
  border-radius: 2rpx;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.sale-list {
  padding: 70rpx 20rpx 20rpx;
}

.sale-list .sale {
	// background-image: url(@/static/images/orderListBg.png);
	background: #fff;
	background-size: 100% 100%;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  padding: 24rpx 36rpx;
}

.sale-list .goods__img-wrapper {
  width: 164rpx;
  height: 164rpx;
  border-radius: 10rpx;
  overflow: hidden;
}

.sale-list .goods__img {
  width: 100%;
  height: 100%;
}

.sale-list .sale-img {
  width: 28rpx;
  height: 28rpx;
}

.sale-list .goods__name {
  font-weight: bold;
}

.sale-cancel-alert {
  text-align: center;
}

.sale-alert-container {
  background: #FFFFFF;
  border-radius: 30rpx;
  padding-top: 50rpx;
  box-sizing: border-box;
}
.sale-alert .assets-info-wrapper {
  padding: 0 20rpx;
}
.sale-alert .assets-info {
  height: 200rpx;
  background: #1C1C1C;
  border-radius: 20rpx;
  padding: 0 30rpx;
}

.sale-alert .assets__img {
  width: 146rpx;
  height: 146rpx;
  border-radius: 14rpx;
}

.sale-alert .assets__num {
  margin-top: 20rpx;
  text-align: left;
}

.sale-alert .assets__num text {
  height: 40rpx;
  background: #F5F5F5;
  padding: 0 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: bold;
  color: $uni-text-color-grey;
  line-height: 40rpx;
}

.sale-alert .btn-wrapper {
  border-top: 1px solid #D2D2D2;
  margin-top: 60rpx;
  position: relative;
}

.sale-alert .btn-wrapper:before {
  content: "";
  width: 1px;
  height: 100%;
  background: #D2D2D2;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

.sale-alert .btn-wrapper .btn {
  height: 90rpx;
  line-height: 90rpx;
}
.btn-cancel-wrapper {
  text-align: right;
  display: flex;
  justify-content: end;
}
.btn-cancel {
  display: inline-block;
  width: 176rpx;
  height: 54rpx;
  border: 1px solid #B0B0B0;
  border-radius: 34px;
  font-size: 30rpx;
  color: #B0B0B0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.price{
	color: #CCA754;
}
.assets__no_warp{
	background:#D8B15D ;
	font-size: 26rpx;
	color: #000001;
	padding: 5rpx;
	display: flex;
	// flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
.assets__no_warp .left{
	padding:0 10rpx ;
}
.assets__no_warp .right{
	background:#3E372E ;
	color: #CFAF76;
	padding: 4rpx 14rpx;
}
.goods__text{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: stretch;
	align-content: space-around;
}
</style>
